<template name="skeletonCategory">
    <view class="sk-container tabbar_padding_b" @touchmove.stop.prevent="() => {}">
        <view class="skeleton_loading"></view>
        <u-navbar :placeholder="true">
            <template #left>
                <view class="nav_title"></view>
            </template>
        </u-navbar>
        <view class="group1">
            <view class="group1_left"></view>
            <view class="group1_right"></view>
        </view>
        <view class="group2">
            <view class="group2_left">
                <view class="group2_left_item" v-for="i in 15" :key="`k${i}`"></view>
            </view>
            <view class="group2_right">
                <view class="group2_right_top">
                    <view class="group2_right_top_item" v-for="i in 5" :key="`x${i}`"></view>
                </view>
                <view class="group2_right_bottom">
                    <view class="group2_right_bottom_item" v-for="i in 10" :key="`x${i}`">
                        <view class="group2_right_bottom_item_left"> </view>
                        <view class="group2_right_bottom_item_right">
                            <view class="group2_right_bottom_item_right_1"></view>
                            <view class="group2_right_bottom_item_right_2"></view>
                            <view class="group2_right_bottom_item_right_3">
                                <view class="group2_right_bottom_item_right_3_l"></view>
                                <view class="group2_right_bottom_item_right_3_r"></view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup></script>

<style lang="scss" scoped>
.nav_title {
    width: 50rpx;
    height: 30rpx;
    background-color: #eeeeee;
}
.group1 {
    padding: 18rpx 29rpx 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .group1_left {
        flex: 1;
        height: 63rpx;
        margin-right: 29rpx;
        border-radius: 31.5rpx;
        background-color: #eeeeee;
    }
    .group1_right {
        width: 58rpx;
        height: 40rpx;
        background-color: #eeeeee;
    }
}
.group2 {
    display: flex;
    .group2_left {
        width: 220rpx;
        .group2_left_item {
            width: 100%;
            height: 98rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            &::after {
                content: '';
                display: block;
                width: 101rpx;
                height: 36rpx;
                background-color: #eeeeee;
            }
        }
    }
    .group2_right {
        flex: 1;
        padding: 0 29rpx;
        overflow: hidden;
        .group2_right_top {
            display: flex;
            flex-wrap: nowrap;
            overflow: hidden;
            .group2_right_top_item {
                width: 145rpx;
                height: 51rpx;
                margin-right: 18rpx;
                border-radius: 25.5rpx;
                background-color: #eeeeee;
            }
        }
        .group2_right_bottom {
            width: 100%;
            .group2_right_bottom_item {
                display: flex;
                padding: 24rpx 0;
                .group2_right_bottom_item_left {
                    width: 145rpx;
                    height: 145rpx;
                    margin-right: 18rpx;
                    background-color: #eeeeee;
                }
                .group2_right_bottom_item_right {
                    flex: 1;
                    .group2_right_bottom_item_right_1 {
                        width: 100%;
                        height: 27rpx;
                        margin-bottom: 18rpx;
                        background-color: #eeeeee;
                    }
                    .group2_right_bottom_item_right_2 {
                        width: 45%;
                        height: 27rpx;
                        margin-bottom: 18rpx;
                        background-color: #eeeeee;
                    }
                    .group2_right_bottom_item_right_3 {
                        display: flex;
                        justify-content: space-between;
                        align-items: baseline;
                        .group2_right_bottom_item_right_3_l {
                            width: 91rpx;
                            height: 29rpx;
                            background-color: #eeeeee;
                        }
                        .group2_right_bottom_item_right_3_r {
                            width: 54rpx;
                            height: 54rpx;
                            background-color: #eeeeee;
                        }
                    }
                }
            }
        }
    }
}
.sk-container {
    position: relative;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
}
</style>
